<template>
	<div class="page-container" id="home_page">
		<md-app class="md-fixed">
			<md-app-toolbar class="md-primary md-dense" md-elevation="1">
				<md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
					<md-icon>
						<i class="iconfont iconmenu"></i>
					</md-icon>
				</md-button>
				<span class="md-title">BI</span>
				<span class="md-toolbar-section-end" style="display:inline-flex;align-items:center;">
					{{getLangText(label.chinese)}}
					<md-switch v-model="switchLang" class="md-accent" style="margin:8px 16px;"></md-switch>
					{{getLangText(label.english)}}
				</span>
			</md-app-toolbar>

			<md-app-drawer :md-active.sync="menuVisible" md-persistent="mini">
				<md-toolbar class="md-transparent md-dense" md-elevation="0">
					<!-- <span>	{{getLangText(label.nav)}}</span> -->

					<div class="md-toolbar-section-end">
						<md-button class="md-icon-button md-dense" @click="toggleMenu">
							<md-icon>
								<i class="iconfont iconleft"></i>
							</md-icon>
						</md-button>
					</div>
				</md-toolbar>

				<md-list>
					<md-list-item v-for="(item,idx) in appList" :key="item.name" @click="changePage(idx)">
						<md-icon :style="{color:currentPage==idx? 'var(--md-theme-default-primary)':''}">
							<i :class="['iconfont', item.icon]"></i>
						</md-icon>
						<span
							class="md-list-item-text"
							:style="{color:currentPage==idx? 'var(--md-theme-default-primary)':''}"
							:title="getLangText(item)"
						>{{getLangText(item)}}</span>
					</md-list-item>
				</md-list>
			</md-app-drawer>

			<md-app-content style="padding:0;background: white;">
				<router-view :lang-type="langType" />
				<!-- <component :is="appList[currentPage].name" :lang-type="langType"></component> -->
			</md-app-content>
		</md-app>
	</div>
</template>

<script>
	import menus from "@/components/data/menu.js";
	export default {
		name: "Home",
		data: () => ({
			langType: window.localStorage.getItem("langType"),
			label: {
				english: { zh: "英语", en: "English" },
				chinese: { zh: "中文", en: "Chinese" },
				nav: { zh: "导航", en: "navigation" }
			},
			switchLang: false,
			menuVisible: false,
			appList: menus.appList,
			currentPage: 3
		}),
		watch: {
			switchLang() {
				this.langType = this.switchLang ? "en" : "zh";
				window.localStorage.setItem("langType", this.langType);
			}
		},
		methods: {
			toggleMenu() {
				this.menuVisible = !this.menuVisible;
			},
			changePage(idx) {
				this.currentPage = idx;
				window.location.hash = "#/" + this.appList[idx].name;
			},
			setMenu() {
				this.switchLang = (this.langType=='en');
				var menu = window.location.hash.substring(2);
				
				if (menu) {
					for (var i = 0; i < this.appList.length; i++) {
						if (menu.indexOf(this.appList[i].name )>=0) {
							this.currentPage = i;
							break;
						}
					}
				} else {
					this.changePage(0);
				}
			}
		},
		mounted() {
			this.setMenu();
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
#home_page{
	 min-width: 1200px;
   min-height: 700px;
}
	.md-drawer.md-persistent-mini {
		transform: translate3D(0, 52px, 0);
	}
	.md-drawer.md-persistent-mini.md-active {
		transform: translate3D(0, 0, 0);
	}
	.page-container {
		height: 100%;
		width: 100%;
	}
	.md-app {
		height: 100%;
		width: 100%;
		border: 1px solid rgba(#000, 0.12);
	}

	// Demo purposes only
	.md-drawer {
		width: 160px;
	}
	.md-list-item-content>.md-icon:first-child{
		margin-right:8px;
	}
	.md-list-item-content{
		padding:4px 8px;
	}
</style>
